
new Vue({
	el: '#app',
	data: function () {
		return {
            communityId:'',
            fullscreenLoading:false,
            requestHeaders:'',
            nowDateTime:'',
            host:window.location.protocol+'//'+window.location.host,
            jinJiAnNiu:'',
            menCi:'',
            dingWeiShouHuan:'',
            menCiTotal:0,
            jinJiAnNiuTotal:0,
            dingWeiShouHuanTotal:0,
            menCiRatio:0,
            jinJiAnNiuRatio:0,
            dingWeiShouHuanRatio:0,
            dataSeriesWXMCList:[],
            dataSeriesJJANList:[],
            dataSeriesZNSHList:[],
            dataSeriesWXMCListOnline:[],
            dataSeriesJJANListOnline:[],
            dataSeriesZNSHListOnline:[],
            data_time_x:[],
            legendList:[],


            MCJson:{
                name: "",
                offline: "0",
                online: "0",
                total:'0',
                ratio:0
            },
            JJANJson:{
                name: "",
                offline: "0",
                online: "0",
                total:'0',
                ratio:0
            },
            ZNDHJson:{
                name: "",
                offline: "0",
                online: "0",
                total:'0',
                ratio:0
            },
            list:[],
		}
	},
	created() {
        var localStorageCommunityId=JSON.parse(localStorage.getItem('hc_currentCommunityInfo'))
        if(localStorageCommunityId){
            this.communityId=localStorageCommunityId.communityId?localStorageCommunityId.communityId:this.getUrlParam("communityId");
        }else{
            this.communityId=this.getUrlParam("communityId");
        }
        // console.log(this.localStorageCommunityId,this.headers);
        var that=this;
        that.requestHeaders=getRequestHeaders('00',this.communityId);//获取请求头
        // console.log(that.requestHeaders)
        that.fullscreenLoading = true;
        that.search();
        setInterval(function(){
            that.search();
            // that.fullscreenLoading = true;
        },5000);
        that.nowDateTime=that.getNowTime();
        setInterval(function(){
            that.nowDateTime=that.getNowTime();
        }, 1000)
      
    },
	mounted(){
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 768) {
                        docEl.style.fontSize = 120 * (clientWidth / 1920) + 'px';
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        var isSandscape=this.getUrlParam("sandscape");//H5通过旋转实现横屏
        // 直接在最外层的div调用该函数即可
        if(isSandscape && isSandscape=='sandscape'){
            var that=this;
            setTimeout(function(){
                that.changeOrientation($('.intelligent_big_screen'));
            })
        }
	},
	methods: {
        search(){
            var that=this;
            this.getListElderAlertStatus();
            this.getListDeviceOnlineInfo();
            this.getListElderAlertCountByDeviceType();
            setTimeout(function(){
                that.fullscreenLoading = false;
            },10000)
        },
        getNowTime () {
			let date = new Date();
			let year = date.getFullYear(); //获取当前年份
			let mon = date.getMonth() + 1; //获取当前月份
			let da = date.getDate(); //获取当前日
            let h = date.getHours(); //获取当前年份
			let m = date.getMinutes(); //获取当前月份
			let s = date.getSeconds(); //获取当前日
			if(mon <10){
				mon = '0'+mon;
			}
			if(da < 10){
				da = '0'+da;
			}
            if(h <10){
				h = '0'+h;
			}
			if(m < 10){
				m = '0'+m;
			}
            if(s <10){
				s = '0'+s;
			}
		    return year+'年'+mon+'月'+da+'日'+' '+h+':'+m+':'+s;
		},
        changeOrientation($print){
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;
            $print.addClass('isIntellSandscape');
            $print.parents().addClass('isSandscapebBody');
            var h=((height-width)/2).toFixed(0);
            var that=this;
            if( width < height ){
                console.log('竖屏',height,width)
                // 竖屏
                $print.width('100vh');
                $print.height('100vw');
                $print.css('overflow', 'auto');
                $print.css('position', 'absolute');
                $print.css('top', (height-width)/2 );
                $print.css('left',0-h);
                $print.css('transform' , 'rotate(90deg)');
                $print.css('transform-origin' , '50% 50%');
            } 
        },
        //设备在线数量
        getListDeviceOnlineInfo(){
            let url=this.host+'/app/deviceInfo.listDeviceOnlineInfo';
            let params={
                "encStoreId" : this.getUrlParam("encStoreId"),
            }
            var that=this;
            $.ajax({
                url : url,
                type: 'POST',
                dataType:'json',
                // contentType: 'text/plain',
                contentType: 'application/json',
                headers:that.requestHeaders,
                data: JSON.stringify(params),
                success : function (res){
                    // console.log(res)
                    if(res.code=='0000'){
                        that.fullscreenLoading = false;
                        var menCi=res.data.menCi;
                        var jinJiAnNiu=res.data.jinJiAnNiu;
                        var dingWeiShouHuan=res.data.dingWeiShouHuan;
                        that.MCJson.total=Number(menCi.offline)+Number(menCi.online);
                        that.MCJson.ratio=Number(menCi.online)/Number( that.MCJson.total)*100;
                        that.MCJson.name=menCi.name;
                        that.MCJson.online=menCi.online;
                        that.MCJson.offline=menCi.offline;
    
                        that.JJANJson.total=Number(jinJiAnNiu.offline)+Number(jinJiAnNiu.online);
                        that.JJANJson.ratio=Number(jinJiAnNiu.online)/Number( that.JJANJson.total)*100;
                        that.JJANJson.name=jinJiAnNiu.name;
                        that.JJANJson.online=jinJiAnNiu.online;
                        that.JJANJson.offline=jinJiAnNiu.offline;
    
                        that.ZNDHJson.total=Number(dingWeiShouHuan.offline)+Number(dingWeiShouHuan.online);     
                        that.ZNDHJson.ratio=Number(dingWeiShouHuan.online)/Number(  that.ZNDHJson.total)*100; 
                        that.ZNDHJson.name=dingWeiShouHuan.name;
                        that.ZNDHJson.online=dingWeiShouHuan.online;
                        that.ZNDHJson.offline=dingWeiShouHuan.offline;
                        that.legendList=[that.MCJson.name,that.JJANJson.name,that.ZNDHJson.name]
                    }else{
                        that.fullscreenLoading = false;
                        that.$message({duration:3000,message:res.msg}); 
                    }
                },
                error:function(res){
                    console.log(res)
                    that.fullscreenLoading = false;
                    that.$message({duration:3000,message:res.responseText});
                }
            })
        },
        // 折线图-七天
        getListElderAlertCountByDeviceType(){
            let url=this.host+'/app/elderAlert.listElderAlertCountByDeviceType';
            let params={
                "encStoreId" : this.getUrlParam("encStoreId"),
            }
            var that=this;
            $.ajax({
                url : url,
                type: 'POST',
                dataType:'json',
                // contentType: 'text/plain',
                contentType: 'application/json',
                headers:that.requestHeaders,
                data: JSON.stringify(params),
                success : function (res){
                    console.log(res);
                    if(res.code=='0000'){
                        var data=res.data.smartDeviceTypeCount;
                        that.fullscreenLoading = false;
                        that.dataSeriesWXMCList=data.men_ci0;
                        that.dataSeriesWXMCListOnline=data.men_ci1;

                        that.dataSeriesJJANList=data.jin_ji_an_niu0;
                        that.dataSeriesJJANListOnline=data.jin_ji_an_niu1;

                        that.dataSeriesZNSHList=data.ding_wei_shou_huan0
                        that.dataSeriesZNSHListOnline=data.ding_wei_shou_huan1
                        that.data_time_x=res.data.alertTime;
                        that.loadEchart1()
                    }else{
                        that.fullscreenLoading = false;
                        console.log('折线图error',res)
                        // that.$message({duration:3000,message:res.msg}); 
                    }
                },
                error:function(res){
                    console.log('折线图error',res)
                    that.fullscreenLoading = false;
                    // that.$message({duration:3000,message:res.responseText});
                }
            })

        },
        //预警状态展示
        getListElderAlertStatus(){
            let url=this.host+'/app/elderAlert.listElderAlertStatus';
            let params={
                "encStoreId" : this.getUrlParam("encStoreId"),
            }
            var that=this;
            $.ajax({
                url : url,
                type: 'POST',
                dataType:'json',
                // contentType: 'text/plain',
                contentType: 'application/json',
                headers:that.requestHeaders,
                data: JSON.stringify(params),
                success : function (res){
                    if(res.code=='0000'){
                        // console.log(res)
                        that.list=[];
                        that.fullscreenLoading = false;
                        var dataList=res.data;
                        for(var i=0;i<dataList.length;i++){
                            if(dataList[i].total && dataList[i].total!=0){
                                dataList[i].ratio=Number((Number(dataList[i].num)/Number(dataList[i].total)*100).toFixed(2));
                            }else{
                                dataList[i].ratio=0;
                            }
                        }
                        for(var i=0;i<dataList.length;i+=2){
                            that.list.push(dataList.slice(i,i+2));
                        }
                        // console.log( that.list)
                    }else{
                        console.log('预警状态展示error'+res)
                        that.fullscreenLoading = false;
                    }

                },
                error:function(res){
                    console.log('预警状态展示error'+res)
                    that.fullscreenLoading = false;
                    // that.$message({duration:3000,message:res.responseText});
                }
            })
        },
        getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        },
        loadEchart1(){
            var option;
            var that=this;
            option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        // console.log(params)
                        var html= "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ad2ff;'></span> "+'门磁已处理: ' + params[1].value + '户</br>'
                        + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ad2ff;'></span> "+'门磁未处理: ' + params[0].value + '户</br>'
                        + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ad2ff;'></span> "+'紧急按钮已处理: ' + params[3].value + '户</br>'
                        + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ad2ff;'></span> "+'紧急按钮未处理: ' + params[2].value + '户</br>'
                        + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ad2ff;'></span> "+'定位手环已处理: ' + params[5].value + '户</br>'
                        + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ad2ff;'></span> "+'定位手环未处理: ' + params[4].value + '户</br>'
                        return html
                       // 鼠标移上显示的文字
                       //1.span是小蓝点
                       //2.后边是显示的文字，一定要加[0](如果想知道为啥log一下看看数据console.log(params))
                    }
                },
                color:['rgba(85,133,231,1)','rgba(42,188,152,1)','rgba(85,104,134,1)'],
                grid: {
                    right:'5%',
                    bottom: '15%',
                    containLabel: true
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: that.legendList,
                    textStyle:{
                        color: '#fff',
                    }
                },
                xAxis: {
                    type: 'category',
                    data: that.data_time_x,
                    boundaryGap: true, //xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:false
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    axisLabel:{
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                },
                yAxis:[{
                    type: 'value',
                    name: '每日预警住户数',
                    minInterval: 1,
                    scale:true,
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    axisLabel:{
                        fontSize:'12',
                    },
                    axisTick:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    }
                }],
                series: [
                    {
                        name: '门磁',
                        type: 'bar',
                        stack: '门磁',
                        data: that.dataSeriesWXMCList,
                        barWidth : 15,
                        itemStyle: {
                            color: 'rgba(85,133,231,1)',
                        },
                    },
                    {
                        name: '门磁',
                        type: 'bar',
                        stack: '门磁',
                        data: that.dataSeriesWXMCListOnline,
                        barWidth : 15,
                        itemStyle: {
                            color: 'rgba(85,133,231,0.42)',
                        },
                        label: {
                            show:false,
                            position: 'top',
                            color:'#fff',
                            formatter:function (params) {
                                // console.log(params)
 
                                if(params.value==0){  //为0时不显示
                                    return '' 
                                }else{
                                    return params.value
                                }
                            }
                        },
                    },
                    {
                        name: '紧急按钮',
                        type: 'bar',
                        stack: '紧急按钮',
                        data:  that.dataSeriesJJANList,
                        barWidth : 15,
                        itemStyle: {
                            color: 'rgba(42,188,152,1)',
                        },
                       
                    },
                    {
                        name: '紧急按钮',
                        type: 'bar',
                        stack: '紧急按钮',
                        data: that.dataSeriesJJANListOnline,
                        barWidth : 15,
                        itemStyle: {
                            color: 'rgba(42,188,152,0.42)',
                        },
                        label: {
                            show:false,
                            position: 'top',
                            color:'#fff',
                            formatter:function (params) {
                                if(params.value==0){  //为0时不显示
                                    return '' 
                                }else{
                                    return params.value
                                }
                            }
                        }, 
                    },
                    {
                        name: '定位手环',
                        type: 'bar',
                        stack: '定位手环',
                        data:  that.dataSeriesZNSHList,
                        barWidth : 15,
                        color: 'rgba(85,104,134,1)',
                    },
                    {
                        name: '定位手环',
                        type: 'bar',
                        stack: '定位手环',
                        barWidth : 15,
                        data:  that.dataSeriesZNSHListOnline,   
                        barGap:'10%',/*多个并排柱子设置柱子之间的间距*/
                        itemStyle: {
                            color: 'rgba(85,104,134,0.42)',
                        },
                        label: {
                            show:false,
                            position: 'top',
                            color:'#fff',
                            formatter:function (params) {
                                if(params.value==0){  //为0时不显示
                                    return '' 
                                }else{
                                    return params.value
                                }
                            }
                        },
                    },
                ]
            };

            var myChart = echarts.init(document.getElementById('myChart1'));
            option && myChart.setOption(option);
        }
	}
});
